<template>
	<view>
		<form @submit="formSubmit">
		  <view class="cu-form-group">
			  <view class="title">姓名</view>
			  <input placeholder="请输入姓名" name="nickname" :value="nickname" maxlength="10" />
		  </view>

		  <view class="cu-form-group">
			  <view class="title">微信号</view>
			  <input placeholder="请输入微信号" name="wxaccount" :value="wxaccount" maxlength="30" />
		  </view>
		  <view class="cu-form-group">
			  <view class="title">抖音号</view>
			  <input placeholder="请输入抖音号(选填)" name="dyaccount" :value="dyaccount" maxlength="30" />
			
		  </view>
		  <view class="cu-form-group">
			  <view class="title">唯一口令</view>
			  <input placeholder="请输入字母，或数字建议控制在8位" name="word" :value="word" maxlength="8" @input="wordInput" />
			  <button class="cu-btn bg-blue shadow guoshao-bg" @click.stop.prevent="checkWord">检测</button>
		  </view>
		  
		  <view class="cu-form-group">
			  <view class="title">手机号码</view>
			  <input placeholder="请输入手机号码" name="phone" :value="phone" maxlength="11" />
		  </view>

		  <view class="cu-form-group"></view>

		  <view class="padding flex flex-direction">
			  <button class="cu-btn bg-blue margin-tb-sm lg round guoshao-bg" formType="submit">保存信息</button>
		  </view>
	  </form>
	</view>
</template>

<script>
	
	const http = require('../../../utils/http.js');
	
	export default {
		data() {
			return {
				request:false,
				nickname: '',
				wxaccount: '',
				dyaccount: '',
				word: '',
				cWord:'',
				oWord:'' ,//原始口令
				phone:''
			}
		},
		onLoad() {
			this.getTalentInfo();
		},
		methods: {
			wordInput: function (e) {
			    this.setData({
			        cWord: e.detail.value
			    });
			},
			getTalentInfo: function (event) {
			    let that = this;
			
			    uni.showLoading({
			        title: '加载中'
			    });
			    var params = {
			        url: '/u/my/getTalentInfo',
			        method: 'POST',
			        data: {
			        },
			        callBack: function (res) {
			            uni.hideLoading();
						console.log(res);
			            if (res.code == 200) {
			               that.nickname = res.data.nickname;
						   that.wxaccount = res.data.wxaccount;
						   that.dyaccount = res.data.dyaccount;
						   that.word = res.data.word;
						   that.oWord = res.data.word;
						   that.cWord = res.data.word;
						   that.phone = res.data.phone;
			            } else {
			                uni.showToast({
			                    title: res.msg,
			                    duration: 2000,
			                    icon: 'none'
			                });
			            }
			        }
			    };
			    http.request(params);
			},
			/**
			 * 检测口令
			 */
			checkWord: function (event) {
			    let that = this;
				if(that.oWord == that.cWord){
					uni.showToast({
					    title: '口令可用',
					    duration: 1500,
					    icon: 'none'
					});
					return;
				}
			    if (this.cWord == '') {
			        uni.showToast({
			            title: '请输入口令',
			            duration: 1500,
			            icon: 'none'
			        });
			        return;
			    }
			
			    uni.showLoading({
			        title: '检测中...'
			    });
			    var params = {
			        url: '/u/my/checkWordEdit',
			        method: 'GET',
			        data: {
			            word: that.cWord
			        },
			        callBack: function (res) {
			            uni.hideLoading();
			
			            if (res.code == 200) {
			                uni.showToast({
			                    title: res.data,
			                    duration: 2000
			                });
			            } else {
			                uni.showToast({
			                    title: res.msg,
			                    duration: 2000,
			                    icon: 'none'
			                });
			            }
			        }
			    };
			    http.request(params);
			},
			formSubmit: function (event) {
				
			    let that = this;
				
			    that.setData(event.detail.value);
			    if (!that.checkdForm()) {
			        return;
			    }
				if(that.request){
					return;
				}
				
				this.request = true;
				
			    uni.showLoading({
			        title: '正在保存'
			    });
				var params = {
				    url: '/u/my/updateTalent',
				    method: 'POST',
				    data: event.detail.value,
				    callBack: function (res) {
				        uni.hideLoading();
				        if (res.code == 200) {
				            uni.showToast({
				                title: res.data,
				                duration: 2000,
								icon: 'none',
								success() {
									setTimeout(function(){
										uni.navigateBack({
											
										})
										that.request = false;
									},1000)
								}
				            });
				        } else {
				            uni.showToast({
				                title: res.msg,
				                duration: 2000,
				                icon: 'none'
				            });
							that.request = false;
				        }
				    }
				};
				http.request(params);
				
			},
			checkdForm: function () {
			    let that = this;
			
			    if (that.nickname == '') {
			        uni.showToast({
			            title: '请输入姓名',
			            icon: 'none',
			            duration: 1000
			        });
			        return false;
			    }
				if (that.wxaccount == '') {
				    uni.showToast({
				        title: '请输入微信号',
				        icon: 'none',
				        duration: 1000
				    });
				    return false;
				}
			    if (that.word == '') {
			        uni.showToast({
			            title: '请输入唯一口令',
			            icon: 'none',
			            duration: 1000
			        });
			        return false;
			    }
				if (that.phone == '') {
				    uni.showToast({
				        title: '请输入手机号码',
				        icon: 'none',
				        duration: 1000
				    });
				    return false;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					return;
				}
			    return true;
			}
		}
	}
</script>

<style>
@import '../../../colorui/main.css';
@import '../../../colorui/icon.css';


page {
    background: white;
}

.word {
    margin-top: -30px;
    position: absolute;
    margin-left: 20px;
}

.cu-form-group .title {
    min-width: calc(4em + 15px);
}

.guoshao-bg{
	background-color: #5677fc;
}

.guoshao-choose{
	float: left !important;
	position: absolute !important;
	margin-top: 0px !important;
}

.guoshao-touxian{
	width: 80px !important;
	height: 20px !important;
}
</style>
